<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播 -->
    <!-- {{carousels}} -->
    <div class="banner">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in carousels" :key="item.id">
          <img :src="item.url" alt="" style="width:100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- /轮播 -->
    <!-- 项目 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title">校园新闻</div>
        <!-- {{projects}} -->
        <div class="project" @click="toProject(project.id)"
             v-for="project in projects.list" :key="project.id">
          <div class="project_pic">
            <img :src="project.figure" alt="">
          </div>
          <div class="project_info">
            <div class="project_name"> {{project.name}} </div>
            <div style="margin-bottom: 20px">开始时间：{{fmtDate(project.beginTime)}} ~ 结束时间：{{fmtDate(project.endTime)}}</div>
            <div>{{project.introduce}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentCard">
      <div class="title">最新通知</div>
    </div>
    <div class="contentCard">
      <ContentCard v-for=" item in studentItem.list" :key="item.id" :item="item"></ContentCard>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  // 1. 引入ajax接口，请求工具
  import {get} from "../utils/request"
  import Header from './components/Header'
  import Footer from './components/Footer'
  import Card from './components/card'
  import ContentCard from './components/contentCard'
  import moment from "moment";
  export default {
    components:{
      Header,
      Footer,
      Card,
      ContentCard
    },
    data(){
      return {
        projects:{},
        carousels:[],
        Lists:{},
        studentItem:{}
      }
    },
    created(){
      // 3. 在页面加载的时候调用
      this.loadProjects();
      this.loadCarousels();
      this.getStudentFengCai();
    },
    methods: {
      // 查询轮播图
      loadCarousels(){
        let url = "/index/carousel/findAll";
        get(url).then(resp => {
          this.carousels = resp.data
        })
      },
      // 2. 定义一个加载数据的方法
      loadProjects(){
        let url = "/index/project/pageQuery";
        let param = {page:1,pageSize:10};
        get(url,param).then( resp => {
          this.projects = resp.data;
        })
      },
      toProject(id){
        // 跳转
        this.$router.push({
          path:"/project",
          query:{projectId:id}
        })
      },
      toArticle(){
        this.$router.push({
          path:"/List",
          query:{ListId:id}
        })
      },
      //风采卡片
      getStudentFengCai() {
        let param = {page:1,pageSize:6};
        let url ="/index/article/pageQuery";
        get(url,param).then(resp => {
          this.studentItem = resp.data;
          console.log(this.studentItem)
        })
      },
      //时间戳转换
      fmtDate(date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/scss/variable';
  .home {
    background-image: $bgImage;
    width: 100%;
    .banner {
      margin-top: 10px;
    }
    .title {
      font-size: 20px;
      line-height: 2em;
      font-weight: bold;
    }
    // 居中容器
    .wrapper {
      width: 90%;
      margin: 0 auto;
    }
    // 大图
    .bg_pic {
      img {
        width: 100%;
      }
    }
    .contentCard {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 90%;
      margin: 0 auto;
      .title {
        font-size: 20px;
        line-height: 2em;
        font-weight: bold;
      }
    }
    // 游学项目

    .projects{
      .project {
        margin-bottom: 1em;
        & > div {
          height: 200px;
        }
        .project_pic {
          width: 300px;
          float: left;
          border-radius: 5px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .project_info {
          margin-left: 320px;
          .project_name {
            line-height: 1.6em;
            font-weight: bolder;
            margin-bottom: 20px;
          }
        }
      }
    }
  }

</style>